.programContainer {
  @apply h-screen overflow-hidden relative;

  .select {
    @apply absolute left-0 h-9 text-white flex justify-between items-center bg-bg;
    z-index: var(--content-index);
    width: calc(100% - 22rem);
    margin-top: 5.75rem;

    .selectLeft {
      @apply h-full flex items-center relative;

      .leftH1 {
        @apply text-2xl flex items-center cursor-pointer;
        font-weight: 400 !important;

        p {
          @apply text-sm;
          color: #939393;
        }

        .img {
          @apply mr-5;
          width: 0.875rem;
          height: 0.625rem;
          margin-left: 0.375rem;
        }
      }

      &:hover {
        .selectBox {
          @apply block;
        }
      }

      .selectBox {
        @apply hidden absolute left-0 top-9 w-40 rounded overflow-y-auto bg-bg33;
        max-height: 17.5rem;
        z-index: var(--content-index);
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);

        &::-webkit-scrollbar {
          @apply w-1;
        }

        &::-webkit-scrollbar-thumb {
          @apply rounded;
          background-color: #4c4c4c;
        }

        .cTypeItem {
          @apply text-sm w-full h-10 leading-10 pl-5;

          &:hover {
            @apply cursor-pointer text-theme bg-bg33;
          }

          &.typeItemActive {
            @apply text-theme;
          }
        }
      }
    }

    .calendar {
      @apply relative;

      &:hover {
        .calendarItem {
          @apply block;
        }
      }

      .calendarClick {
        @apply h-9 cursor-pointer flex items-center text-sm;

        & > img {
          @apply w-5 h-5;
          margin-right: 0.375rem;
        }

        color: rgba(255, 255, 255, 0.8);
      }

      .calendarItem {
        @apply hidden absolute right-0 top-9;
        z-index: var(--content-index);
      }
    }
  }

  .main {
    @apply flex;
    height: calc(100vh - 10.875rem);
    padding-bottom: 2.75rem;
    margin-top: 10.875rem;

    .mainLeft {
      @apply flex-1 overflow-y-auto;
      margin-top: -3.5rem;
      scrollbar-width: 0;

      &::-webkit-scrollbar {
        @apply w-1;
      }

      &::-webkit-scrollbar-thumb {
        @apply rounded;
        background-color: #676767;
      }

      .loading {
        @apply flex;
        margin: 0.625rem auto;

        &.loadNull {
          height: 0 !important;
          margin: 0 !important;
        }
      }
    }

    .mainRight {
      @apply mx-4 w-80 flex flex-col overflow-y-auto;

      &::-webkit-scrollbar {
        @apply w-1;
      }

      &::-webkit-scrollbar-thumb {
        @apply rounded;
        background-color: #676767;
      }

      .moreProject {
        @apply w-full rounded-lg bg-bg25;
        padding: 1.125rem 0.25rem 0.625rem 1.25rem;

        .title {
          @apply text-base leading-6 text-white;
          margin-bottom: 0.875rem;
        }

        .projectBox {
          @apply flex flex-wrap;

          .projectItem {
            @apply mb-3 h-9 rounded flex items-center justify-center text-sm text-white bg-bg33;
            margin-right: 0.625rem;
            width: 5.25rem;

            & > img {
              @apply w-5 h-5 mr-1;
            }

            &.projectItemActive {
              @apply bg-theme;
            }

            &:hover {
              @apply bg-theme;
            }
          }
        }
      }

      .hotRace {
        @apply my-4 pl-5 w-full bg-bg25 rounded-lg;
        padding-top: 1.125rem;

        .title {
          @apply text-base leading-6 text-white;
          margin-bottom: 0.875rem;
        }

        .projectBox {
          @apply flex flex-wrap;

          .projectItem {
            @apply mr-6 mb-5 flex flex-col items-center text-sm text-white;
            width: 3.125rem;
            height: 4.875rem;

            & > img {
              @apply mb-2;
              width: 3.125rem;
              height: 3.125rem;
              border-radius: 50%;
            }

            & > span {
              @apply text-center text-sm inline-block w-full;
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }

      .raceDesc {
        @apply flex-1 w-full h-auto bg-bg25 rounded-lg flex-col overflow-hidden;
        min-height: 12.5rem;
        padding: 1.125rem 1.25rem;

        .title {
          @apply text-base leading-6 h-6 text-white;
          margin-bottom: 0.875rem;
        }

        .desc {
          @apply flex-1 text-sm text-c99 overflow-y-auto;

          &::-webkit-scrollbar {
            @apply w-1;
          }

          &::-webkit-scrollbar-thumb {
            @apply rounded-sm;
            background-color: #676767;
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .programContainer {
    .main {
      @apply flex-col;
      padding-bottom: 1.25rem !important;
      height: calc(100vh - 6.5rem) !important;
      margin-top: 5.75rem !important;

      .commHotRace {
        @apply relative w-full rounded-lg overflow-hidden;
        background-color: #242424;
        height: 7.75rem;
        margin: 0.625rem auto 0;
        padding-right: 2.75rem;

        .hTitle {
          @apply text-sm text-white my-3 ml-4;
        }

        .hotBox {
          @apply flex flex-nowrap;
          overflow-x: auto;
          overflow-y: hidden;

          .item {
            @apply flex flex-col items-center text-xs;
            height: 4.9375rem;
            min-width: 4.5rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.125rem;
            font-size: 0.75rem;

            & > img {
              @apply w-10 h-10;
              margin-bottom: 0.4375rem;
            }
          }
        }

        .allRace {
          @apply absolute right-0 top-0 h-full text-sm flex items-center justify-center flex-col;
          width: 2.75rem;
          background-color: #242424;
          box-shadow: -0.625rem 0 0.625rem rgba(0, 0, 0, 0.2);
          color: rgba(255, 255, 255, 0.8);

          span {
            line-height: 1.0625rem;
          }
        }
      }

      .mainLeft {
        width: 100% !important;
        margin-top: 0 !important;
      }

      .phoneDesc {
        @apply w-full px-4 h-6 mt-5 flex justify-between items-center;

        .left {
          @apply text-lg text-white;
          font-family: 'SimHei', '黑体', sans-serif;
        }

        .right {
          @apply h-6 flex text-xs items-center;
          color: rgba(255, 255, 255, 0.6);

          img {
            @apply w-6 h-6;
          }
        }

        .descPhoneMask {
          @apply fixed top-0 bottom-0 right-0 left-0 bg-black-60;
          z-index: var(--modal-index);
          transform: scale(0);

          &.showBox {
            transform: scale(1);

            .phoneDescBox {
              bottom: 0 !important;
            }
          }

          .phoneDescBox {
            @apply absolute left-0 right-0 flex flex-col p-4 overflow-y-auto;
            bottom: -80vh;
            max-height: 80vh;
            background-color: #242424;
            border-top-left-radius: 1.25rem;
            border-top-right-radius: 1.25rem;
            padding-bottom: 0.625rem;
            transition: all 0.3s;

            .close {
              @apply absolute right-4;
              width: 1.375rem;
              height: 1.375rem;
              top: 0.625rem;
            }

            .title {
              @apply text-lg text-white;
              line-height: 1.6875rem;
              margin-bottom: 0.875rem;
            }

            .content {
              @apply text-sm;
              line-height: 1.3125rem;
              color: #ccc;
              padding-bottom: 6.25rem;
            }
          }
        }
      }
    }
  }

  .allRaceMaskBox {
    @apply fixed top-0 bottom-0 right-0 left-0 bg-black-60;
    z-index: var(--modal-index);
    transform: scale(0);

    &.showBox {
      transform: scale(1);

      .allRaceBox {
        bottom: 0 !important;
      }
    }

    .allRaceBox {
      @apply absolute left-0 right-0 flex flex-col px-4 w-full;
      bottom: -80vh;
      height: 80vh;
      background-color: #242424;
      border-top-left-radius: 1.25rem;
      border-top-right-radius: 1.25rem;
      padding-bottom: 0.625rem;
      transition: all 0.3s;

      .close {
        @apply w-full text-right pr-4;
        height: 1.375rem;

        img {
          width: 1.375rem;
          height: 1.375rem;
        }
      }

      .box {
        @apply flex-1 overflow-y-auto;

        .raceItem {
          .title {
            @apply flex h-8 text-base text-white;
            margin-bottom: 0.875rem;
            margin-top: 0.375rem;

            img {
              @apply mr-1;
              width: 1.375rem;
              height: 1.375rem;
            }
          }

          .raceItemBox {
            @apply flex flex-wrap;

            .itemBoxChild {
              @apply ml-4 px-1 h-10 leading-10 rounded text-white text-sm text-center bg-bg33;
              width: calc(calc(100% - 3rem) / 4);
              margin-bottom: 0.625rem;

              &.active {
                @apply text-theme;
              }

              &:nth-child(4n + 1) {
                @apply ml-0;
              }
            }
          }
        }
      }
    }
  }
}

// 横屏代码
@media screen and (max-width: 767px) and (orientation: landscape) {
  .programContainer {
    @apply overflow-y-auto;
    .main {
      @apply block;
      .commHotRace {
        height: 5.75rem;
        margin-top: 94px;
      }
      .mainLeft {
      }
    }
  }
}
